<template>
  <div class="cart">
    <div class="row flex header">
      <div class="cell f1">
        <!-- <i class="iconfont icon-yduifuxuankuangxuanzhong"></i> -->
        <i
          class="iconfont"
          :class="
            isCheckAll
              ? 'icon-yduifuxuankuangxuanzhong'
              : 'icon-yduifuxuankuang'
          "
          @click="CheckAll"
        ></i>
      </div>
      <div class="cell f4">礼品信息</div>
      <div class="cell f3">兑换分数</div>
      <div class="cell f2">数量</div>
      <div class="cell f2">小计</div>
      <div class="cell f1">操作</div>
    </div>
    <div class="row flex item" v-for="item in list" :key="item.id">
      <div class="cell f1">
        <!-- <i class="iconfont icon-yduifuxuankuang"   icon-yduifuxuankuang></i> -->
        <i
          class="iconfont"
          :class="
            item.isChecked
              ? 'icon-yduifuxuankuangxuanzhong'
              : 'icon-yduifuxuankuang'
          "
          @click="checkSelf(item)"
        ></i>
      </div>
      <div class="cell flex f4">
        <img width="85" :src="item.coverImg | srcFormat" />
        <div>
          <p>{{ item.seriesTitle }}</p>
          <p>{{ item.versionDescription }}}</p>
        </div>
      </div>
      <div class="cell f3">{{ item.coin }}鸡腿</div>
      <div class="cell f2 flex">
        <div class="step flex">
          <span @click="reduce(item, $event)">-</span>
          <input type="text" v-model="item.total" />
          <span @click="add(item, $event)">+</span>
        </div>
      </div>
      <div class="cell f2">{{ item.totalCost }}鸡腿</div>
      <div class="cell f1">
        <input type="button" value="删除" @click="del(item)" />
      </div>
    </div>
    <div class="total">
      <div class="total-number">总计：{{ totalCoin }}鸡腿</div>
      <div class="submit">提交</div>
    </div>
    <Confirm ref="comfirm" msg="你确定要删除吗" @sure="deleteItem"></Confirm>
  </div>
</template>
 
<script>
import { getCartDataApi, getDeleteCartApi, addToCarApi } from "../../http/api";
import { toast } from "../../utils/toast";
import Confirm from "@/components/common/Confirm.vue";
export default {
  components: { Confirm },
  data() {
    return {
      list: [],
      deleteId: 0,
    };
  },
  created() {
    this.getCartData();
  },
  methods: {
    async getCartData() {
      const res = await getCartDataApi();
      //   console.log(res);
      //   this.list = res.data;
      this.list = res.data.map((e) => {
        e.isChecked = false;
        return e;
      });
    },
    CheckAll() {
      const result = !this.isCheckAll;
      this.list.forEach((e) => (e.isChecked = result));
    },
    checkSelf(item) {
      item.isChecked = !item.isChecked;
      console.log(item.isChecked);
      console.log(item);
    },
    reduce(item, event) {
      if (item.total <= 1) return toast("至少一件噢", "warning");
      item.total--;
      clearTimeout(event.target.timer);
      event.target.timer = setTimeout(() => {
        addToCarApi({
          productId: item.id,
          total: item.total,
          modified: 1,
        }).then((res) => {
          console.log(res);
        });
      }, 1000);
    },
    add(item, event) {
      if (item.total >= 5) return toast("至多买5件噢", "warning");
      // item.total++;
      // if (event.target.temp) {
      //   event.target.temp++;
      // } else {
      //   event.target.temp = 1;
      // }
      item.total++;
      clearTimeout(event.target.timer);
      event.target.timer = setTimeout(() => {
        addToCarApi({
          productId: item.id,
          total: item.total,
          modified: 1,
        }).then((res) => {
          console.log(res);
        });
      }, 1000);
    },
    del(item) {
      // 确认要删除 显示confirm组件
      console.log(this.$refs);
      console.log(item.id);
      this.$refs.comfirm.show();
      this.deleteId = item.id;
    },
    deleteItem() {
      console.log(this.deleteId);
      getDeleteCartApi(this.deleteId).then((res) => {
        if (res.code === 0) {
          toast(res.message, "success");
          const index = this.list.findIndex((e) => e.id === this.deleteId);
          this.list.splice(index, 1);
          this.$refs.comfirm.hide();
        } else {
          toast(res.message, "danger");
        }
      });
    },
  },
  computed: {
    isCheckAll() {
      return this.list.filter((e) => e.isChecked).length === this.list.length;
    },
    totalCoin() {
      return this.list.reduce((prev, current) => {
        // let sum = 0;
        // if (current.isChecked) {
        //   sum = current.coin * current * total;
        // }
        // return (prev += sum);
        return (prev += current.isChecked ? current.coin * current.total : 0);
      }, 0);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.cart {
  .f1 {
    flex: 1;
  }
  .f2 {
    flex: 2;
  }
  .f3 {
    flex: 3;
  }
  .f4 {
    flex: 4;
  }
  .header {
    height: 60px;
    background-color: #d8d8d8;
    text-align: center;
    line-height: 60px;
    color: #666;
  }
  .item {
    height: 120px;
    border: 1px solid #ccc;
    border-top: 0 solid #000;
    .cell {
      padding: 10px;
      line-height: 100px;
      text-align: center;
      align-items: center;
      p {
        line-height: 40px;
      }
    }
    .step {
      span {
        box-sizing: border-box;
        border: 1px solid #ccc;
        height: 24px;
        width: 24px;
        line-height: 24px;
        text-align: center;
      }
      input {
        border: 1px solid #ccc;
        border-left: 0 solid #000;
        border-right: 0 solid #000;
        padding: 0;
        width: 36px;
        height: 22px;
      }
    }
  }
}
.total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 28px;
  .total-number {
    span {
      color: #fd604d;
    }
  }
  .submit {
    width: 200px;
    height: 60px;
    background-color: #0a328a;
    color: #fff;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
  }
}
</style>